<!-- 养殖批次 -->
<template>
    <el-dialog :close-on-click-modal="false"  append-to-body ref="dialogform" :title="'调整批次占比'" :visible.sync="dialogVisible" width="50%"
        :before-close="handleClose">
        <div>

            <div class="batchInfo">
                <div class="label">剩余占比：</div>
                <div>{{ remainingRatio }}%</div>
                <div class="errText">若您还有需要创建的批次建议您剩余占比不为0%</div>
            </div>
            <div class="batchInfo" v-for="item, index in batchList">
                <div class="label">{{ item.batchName }}：</div>
                <el-input :min="1" :max="10" type="number" placeholder="请输入占比" v-model="item.pondRatio" clearable
                    @change="(e) => { handleChange(e, index) }">
                    <template slot="append">%</template>
                </el-input>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
import batch from '@/api/batch/batchManagement';
export default {
    components: {},
    props: {
        dialogVisible: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        facilityId: null
    },
    data() {
        return {
            batchList: [],
            remainingRatio: 0
        }
    },

    watch: {
        dialogVisible(v) {
            v && this.initData()
        }
    },

    mounted() { },
    methods: {
        initData() {
            this.queryBatchPondRatio(this.facilityId)
        },
        handleChange(num, index) {
            console.log(this.batchList)
            let ratio = this.batchList.reduce((accumulator, currentObject) => {
                return accumulator + Number(currentObject.pondRatio);
            }, 0);
            let remainingRatio = 100 - ratio;
            if (remainingRatio < 0) {
                this.$message.warning('您输入的占比以超出100%，请重新调整！');
                this.batchList[index].pondRatio = 0;
                this.computationPondRatio();
            } else {
                this.remainingRatio = remainingRatio
            }
        },
        queryBatchPondRatio(facilityId) {
            batch.queryByCondition({ batchType: 'BREEDING', facilityId }).then(res => {
                this.batchList = res.data || [];
                console.log(this.batchList)
                this.computationPondRatio()
            })
        },
        //计算占比
        computationPondRatio() {
            let ratio = this.batchList.reduce((accumulator, currentObject) => {
                return accumulator + currentObject.pondRatio;
            }, 0);
            this.remainingRatio = 100 - ratio
        },
        submitForm() {
            let noConfig = this.batchList.find(item => { return !item.pondRatio })
            if (noConfig) {
                this.$message.warning('请先正确配置占比后再提交！')
                return
            } else {
                this.editRatio();
            }
        },
        async editRatio() {
            let list = this.batchList.map(item => {
                return {
                    batchId: item.batchId,
                    pondRatio: item.pondRatio
                }
            })
            let res = await batch.editRatio(list);
            if (res.code == 1) {
                this.$message.success('操作成功')
                this.$emit('getRemainingRatio',this.remainingRatio)
                this.cancel();
            } else {
                this.$message.warning('操作失败')
            }
        },
        //取消关闭 
        cancel() {
            this.$emit("closeDialog")
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => { this.cancel() })
                .catch(_ => { });
        },
    }
};
</script>
<style lang="scss" scoped>
.batchInfo {
    display: flex;
    align-items: center;
    margin-bottom: 15px;

    .label {
        min-width: 120px;
        text-align: right;
        margin-right: 15px;
        font-weight: bold;
    }
}

.errText {
    color: rgb(255, 153, 0);
    padding-left: 15px;
}
</style>